<!--
Copyright (C) 2020 Yoann QUERET <yoann@queret.net>
-->

<!--
This file is part of ODR-EncoderManager.

ODR-EncoderManager is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

ODR-EncoderManager is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with ODR-EncoderManager.  If not, see <http://www.gnu.org/licenses/>.
-->


<!DOCTYPE html>
<html lang="en">

{% include 'head.html' %}

<body>
    {% include 'body-nav.html' %}

    <div class="container-fluid">
        <div class="page-header">
            <h1>Network</h1>
        </div>

        <form class="form-horizontal" role="form">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <span class="glyphicon glyphicon-transfer"></span> <a data-toggle="collapse" data-parent="#accordion" href="#collapseCARDS">Manage network cards</a>
                    </h4>
                </div>
                <div id="collapseCARDS" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <p>Choose a network card you want to manage.</p>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="network_card">Network card:</label>
                            <div class="col-sm-3">
                                <select type="select" class="form-control" id="network_card">
                                </select>
                            </div>
                        </div>

                        <hr />

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="network_dhcp">Enable DHCP</label>
                            <div class="col-sm-3">
                                <select type="select" class="form-control" id="network_dhcp" disabled="disabled">
                                    <option value="true">true</option>
                                    <option value="false">false</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="network_ip">IPv4 address</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="network_ip" disabled="disabled">
                            </div>
                            <label class="control-label col-sm-2" for="network_mask">IPv4 netmask</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="network_mask" disabled="disabled">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="network_gateway">IPv4 gateway</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="network_gateway" disabled="disabled">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="network_route">Route on this interface:</label>
                            <div class="col-sm-3">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="network_route"  value="" placeholder="IP/CIDR (ie: 239.0.0.0/8)" disabled="disabled">
                                    <span class="input-group-btn">
                                        <button class="btn btn-success" id="btn_network_route_add" type="button" disabled="disabled"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div id="network_route_ips">
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="btn_save"></label>
                            <div class="col-sm-3">
                                <button type="button" id="btn_save" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Write network configuration in configuration file." ><span class="glyphicon glyphicon-save"></span> Write changes</button>&nbsp;
                                <button type="button" id="btn_reboot" class="btn btn-danger" data-toggle="modal" data-target="#confirm-reboot"><span class="glyphicon glyphicon-alert"></span> Reboot</button>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="btn_save"></label>
                            <div class="col-sm-8">
                                <div class="alert alert-warning">
                                    <strong>Warning!</strong> You must restart the Audio Companion for the changes to take effect after writing changes.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

         <!-- Modal -->
        <div class="modal fade" id="confirm-reboot" role="dialog">
            <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Reboot Audio Companion.</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <strong>Warning!</strong><br /><br />When you click on the Confirm Reboot button the system will reboot immediately.<br /><br />You have to wait until the complete reboot is finished, and perhaps connect to the new IP address if you have changed it.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger pull-left" id="btn_reboot_confirm" data-toggle="tooltip" data-placement="top" title="Restarting Audio Companion immediately."><span class="glyphicon glyphicon-alert"></span> Confirm Reboot</button>
                </div>
            </div>
            </div>
        </div>

        <form class="form-horizontal" role="form">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <span class="glyphicon glyphicon-transfer"></span> <a data-toggle="collapse" data-parent="#accordion" href="#collapseDNS">Manage DNS servers</a>
                    </h4>
                </div>
                <div id="collapseDNS" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <p>Setup your DNS.</p>

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="network_dns_server">DNS Servers:</label>
                            <div class="col-sm-3">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="network_dns_server"  value="" placeholder="IP DNS server (ie: 8.8.8.8)">
                                    <span class="input-group-btn">
                                        <button class="btn btn-success" id="btn_network_dns_server_add" type="button"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <div id="network_dns_servers">
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="btn_save"></label>
                            <div class="col-sm-3">
                                <a href="#" class="btn btn-primary" id="btn_dns_save" data-toggle="tooltip" data-placement="top" title="Write DNS configuration in configuration file."><span class="glyphicon glyphicon-save"></span> Write changes</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>


        <form class="form-horizontal" role="form">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <span class="glyphicon glyphicon-transfer"></span> <a data-toggle="collapse" data-parent="#accordion" href="#collapseNTP">Manage NTP servers</a>
                    </h4>
                </div>
                <div id="collapseNTP" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <p>Setup your NTP.</p>

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="network_dns_server">NTP Servers:</label>
                            <div class="col-sm-3">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="network_ntp_server"  value="" placeholder="IP or hostname (ie: 8.8.8.8)">
                                    <span class="input-group-btn">
                                        <button class="btn btn-success" id="btn_network_ntp_server_add" type="button"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div id="network_ntp_servers">
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="btn_save"></label>
                            <div class="col-sm-3">
                                <a href="#" class="btn btn-primary" id="btn_ntp_save" data-toggle="tooltip" data-placement="top" title="Write NTP configuration in configuration file."><span class="glyphicon glyphicon-save"></span> Write changes</a>
                                <button type="button" id="btn_restart_ntp" class="btn btn-danger"><span class="glyphicon glyphicon-alert"></span> Restart NTP service</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

    </div>

</body>

</html>
